<template>
	<view>
		<view class="">
			<view class="search">
				<view class="days_list">
					<view class="days" v-for="(day,idx) in days" :key="idx" :class="[idx == curr_day?'act':'']" @click="getOrderStatistic(idx)">
						{{day}}
					</view>
				</view>
			</view>
		</view>
		<!-- 客户动态 -->
		<view class="mycard" style="padding-bottom: 30upx;margin-bottom: 80upx;">
			
			<view class="mycard-body">
				<view class="timesline">
					<!-- <view class="date">{{week[action.week]}}<text>{{action.day}}</text></view> -->
					<view class="item" v-for="(item,idx) in action">
						<view class="" @click.stop="openMember(item.uid)" style="width: 120rpx; flex-grow:0;flex-shrink:0;font-size: 12px;color: #ffaa00;font-weight: bold;">
							{{item.username}}
						</view>
						<view class="line">
							<image :src="website + 'static/images/icon/'+item.type+'.png'" mode="widthFix"></image>
							<!-- <image class="downline" src="../../static/images/icon/downline.png" mode="widthFix"></image> -->
						</view>
						<view class="content" @click="openOrder(item)">
							<view class="title">
								{{item.title}}
								<text @click.stop="openMember(item.uid)" style="display: inline-block;float: right;font-weight: 400;font-size: 12px;" >更多&gt;</text>
							</view>
							<view class="time">{{item.create_time}}</view>
							<view class="info">{{item.content}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				days: ['今天','昨天','本周','本月'],
				curr_day:0,
				page:1,
				last_page:3,
				website:this.tui.imghost,
				action:[],
			}
		},
		onLoad() {
			this.getAction();
		},
		onShow() {
			
		},
		methods: {
			getAction(){
				if(this.last_page < this.page){
					return false;
				}
				this.tui.get('user/api/getactions',{days:this.curr_day,page:this.page}).then(res=>{
					this.action =[...this.action, ...res.data.data];
					this.last_page = res.data.last_page;
					this.page++;
				});
			},
			getOrderStatistic(v){
				this.page =1;
				this.action=[];
				this.last_page=3;
				this.curr_day = v;
				this.getAction();
			},openMember(uid){
				uni.navigateTo({
					url:"./member?mid="+uid
				})
			},openOrder(item){
				if(!item.orderid){
					return;
				}
				if(item.type ==8){
					return;
				}
				uni.navigateTo({
					url:'../myOrder/detail?oid='+item.id
				})
			},
		},onReachBottom() {
			this.getAction();  
		},  
	}
</script>

<style>
	 @import '/static/style/thorui.css'; 
	.header{
		background-repeat: no-repeat;
		background-size: 100% 80%;
	}
	.search{
		padding: 20upx 20upx 0 20upx;
		display: block;
		text-align: center;
	}
	.search .days_list{
		width: 70%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}
	.search .days_list .days{
		display: inline-block;
		width: 25%;
		background: #f1f1f1;
		padding: 6upx 14upx;
		height: 46upx;
		font-size: 24upx;
		line-height: 48upx;
		background-color: #FFFFFF;
		margin: 0 1px;
		text-align: center;
	}
	.search .days_list .days:first-child{
		border-top-left-radius: 10upx;
		border-bottom-left-radius: 10upx;
	}.search .days_list .days:last-child{
		border-top-right-radius: 10upx;
		border-bottom-right-radius: 10upx;
	}
	.search .days_list .days.act{
		background-color: #fe5c84;
		color: #FFFFFF;
	}
	.mycard-title{
		font-size: 15px;
	}
	.timesline{padding :10upx 40upx}
	.timesline .date{font-size: 28upx;color: #999999;padding-bottom: 20upx;}
	.timesline .date text{padding-left: 90upx;}
	.timesline .item{
			display: flex;
			border-bottom: 1px #ddd dashed;
			margin-bottom: 10px;
			padding-bottom: 10px;
		}
	.timesline .item image{width: 36upx;height: 36upx;}
	.timesline .item .time{color: #999;font-size: 22upx;padding: 6upx 5upx;}
	.timesline .item .content{width: 100%;color: #999;font-size: 28upx;padding: 6upx 20upx;display: block;padding-left: 20upx;}
	.timesline .item .content .title{font-weight: 600;font-size: 28upx;}
	.timesline .item .content .info{font-weight: 400;font-size: 24upx;padding-top: 20upx;}
	.timesline .line{width: 50upx;text-align: center;}
	.timesline .line .downline{width: 12px;}
</style>
